<template>
  <!-- <el-tabs  :key="getkey()"  v-model="tab_id" type="border-card">
    <el-tab-pane v-for="(item,inx) in htmlList" :key="inx" :label="item.title" :name="item.id">
      -->
      <xdh-form :key="getkey()" :model="formData" :fields="htmlList" @submit="submitForm"  :disabled="isDisabled" :footer="isFooter" @refreshInit="refreshInit">
      </xdh-form>
    <!-- </el-tab-pane>
  </el-tabs> -->
<!-- <xdh-form-html  :model="formData" :fields="htmlList" :tab_id="tab_id" @submit="submitForm"  :disabled="isDisabled" :footer="isFooter" @refreshInit="refreshInit">
      </xdh-form-html> -->
</template>

<script>
import XdhForm from '@/widgets/xdh-form'
import { getInfo } from '@/api/tpl'
import { commonGetInfo } from '@/api/common'
import { getTplId } from '@/utils/util'
import { mapGetters } from 'vuex'

export default {
  name:'forms',
  components: { XdhForm },
  data() {
    return {
      formData: {},
      tab_id: 0,
      ajax_url: '',
      index_url: '',
      htmlList: [],
      isDisabled:false,
      isKeys:'',
      isFooter:true
    }
  },
  computed: {
    ...mapGetters([
      'routerMenu'
    ])
  },
  mounted() {
    this.inits();
  },
  methods: {
    refreshInit(){
      console.log(111);
      this.getDatas();
    },
    async inits() {
      var tpl_id = await getTplId(this.$route,this.routerMenu);
      var d = {
        id: tpl_id
      };
      const res = await getInfo(d);
      if (res && res.code === 200) {
        console.log(res.data,)
        this.isFooter = res.data.info.is_footer;
        this.index_url = res.data.info.index_url;
        this.ajax_url = res.data.info.ajax_url;
        this.htmlList = res.data.info.template_content;
        this.getDatas();
      }
    },
    async getDatas() {
      var d = JSON.parse(JSON.stringify(this.$route.query));
      
      const res = await commonGetInfo(this.index_url, d);
      if (res && res.code === 200) {
        // console.log(res.data)
        var that = this;
        if (res.data.info && JSON.stringify(res.data.info) != '{}' && JSON.stringify(res.data.info) != '[]') {
          that.formData = res.data.info;
        }

        this.htmlList.forEach((item) => {
          item.content.forEach((elem) => {
            if(that.formData[elem.prop] === undefined) {
              if (!elem.value) {
                if (elem.props.value === false) {
                  elem.value = false;
                } else if (elem.props.value === 0) {
                  elem.value = 0;
                } else if (elem.props.value === '') {
                  elem.value = '';
                } else {
                  elem.value = elem.props.value ? elem.props.value : null;
                }
              }
              this.$set(that.formData, elem.prop, elem.value);
              // that.formData.props['value'] = elem.value;
            }else if (typeof elem.value == 'object'){
              elem.value = that.formData[elem.prop];
            }

          });
        });


      }
       console.log(that.formData,this.htmlList,'+++++++++++++')
    },
    async submitForm(formDatas) {

      this.isDisabled = true;
      var d = JSON.parse(JSON.stringify(formDatas));
      const res = await commonGetInfo(this.ajax_url, Object.assign(d,JSON.parse(JSON.stringify(this.$route.query))));
      if(res && res.code === 200) {
        this.isDisabled = false;
        this.$message({
          message: res.msg,
          type: 'success'
        });
        //如果是编辑菜单，重新生成左边菜单
        if(this.index_url == '/admin/menu/getInfo') {
            this.$store.dispatch('user/getMenuRouter')
        }
        this.isKeys = '';
        this.getDatas();

        //  this.$router.go(-1);

        return true;
      }

      this.isDisabled = false;
      return false;
    },
    getkey() {
      if(!this.isKeys) {
        this.isKeys =  Math.random();
      }
      return this.isKeys;
    }
  }
}
</script>
